<template>
	<div class="menu_six">
		<ol>
			<li v-for="item in list" :key="item.id">
				<p>
					<img :src="item.img"/>
				</p>
				<aside>
					<span>{{item.title}}</span>
					<p>{{item.txt}}</p>
					<label>￥{{item.price}}</label><a>起</a>
					<em>{{item.time}}</em>
				</aside>
			</li>
		</ol>
	</div>
</template>

<script>
	export default{
		name:'Menu_six',
		data(){
			return{
				list:[]
			}
		},
		created(){
			let that = this;
			this.axios.get('/api/dataHome.json').then((res)=>{
				
				that.list = res.data.Homemsg[0].MenuList.list6;
				
				
			} ).catch( (error)=>{
				
				console.log(error)
			} )
		},
	}
</script>

<style scoped>
	.menu_six{
		width: 100%;
		overflow: hidden;
		background-color: #efefef;
	}
	
	.menu_six li{
		background-color: #ffffff;
		width: 48%;
		float: left;
		margin: 1%;
		border-radius: 0.5rem;
		margin-top: 0.2rem;
	}
	.menu_six li:nth-of-type(even){
		margin-top: 0.8rem;
	}
	.menu_six p{
		text-align: center;
	}
	.menu_six li img{
		
		text-align: center;
		width: 96%;
		height: 3rem;
		border-radius: 0.5rem;
	}
	
	.menu_six aside{
		margin: 0 auto;
		width: 96%;
		position: relative;
		height: 0.1rem;
	
	}
	.menu_six aside span{
		width: 2rem;
		margin-left: 0.5rem;
		position: absolute;
		left:-0.5rem;
		bottom: 13rem;
		background-color: rgba(0,0,0,0.6);
		display: block;
		text-align: center;
		color: white;
		border-radius: 0.4rem 0 0.6rem 0;
		font-size: 0.2rem;
		line-height: 0.5rem;
		
	}
	.menu_six aside p{
		display: -webkit-box;
		-webkit-line-clamp: 2;/* 跟高度有关 */
		/* 超出盒子外的文本用省略号代替*/
		-webkit-box-orient: vertical;
		overflow: hidden;
		padding-top: 0.2rem;
		font-weight: bolder;
	}
	
	.menu_six aside label{
		margin-top: 0.1rem;
		display: inline-block;
		color: #ffa500;
		font-weight: bolder;
	}
	.menu_six aside a{
		color: #808080;
		font-size: 0.1rem;
		
	}
	.menu_six aside em{
		float: right;
		margin-top: 0.1rem;
		color: #808080;
		font-size: 0.2rem;
	}
</style>
